<template>
	<view class="fab-bottom">
		<div :class="{'menu-contianer':isMenu}">
			<view class="fab-btns" v-if="menus" :style="{'right':right}">
				<view class="fab-menus" v-if="isMenu">
					<view class="fab-menus-list">
						<view class="fab-menus-item" @click="switchTab('/pages/index/index')">
							<span>首页</span>
							<div class="hd-icon">&#xe63f;</div>
						</view>
						<view class="fab-menus-item" @click="navigateCart()">
							<span>购物车</span>
							<div class="hd-icon">&#xe600;</div>
						</view>
						<view class="fab-menus-item" @click="go('/pages/goods/index')">
							<span>搜索</span>
							<div class="hd-icon">&#xe70a;</div>
						</view>
						<view class="fab-menus-item" @click="go('/pages/personal/order')">
							<span>查订单</span>
							<div class="hd-icon">&#xe60d;</div>
						</view>
					</view>
				</view>
				<view class="fab-btns-item" v-if="!isMenu" @click="menu">快捷<br/>菜单</view>
				<view class="fab-btns-item-clear" v-if="isMenu" @click="clearMenu">X</view>
				<view   class="fab-btns-item grace-animate" v-if="ShowtopBtn" :class="{'fadeInUp':isActiveClass,'fadeOutDown':isNoActive}" @click="scrollTop">返回<br/>顶部</view>
			</view>
		</div>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				menus:true,
				isMenu:false,
				ShowtopBtn:false,
				isActiveClass:false,
				isNoActive:false
			}
		},
		props:{
			topBtn:{
				type:Boolean,
				dedefault:false
			},
			right:{
				type:String,
				dedefault:'20rpx'
			}
		},
		watch:{
			topBtn(n){
				if(n){
					this.ShowtopBtn=false;
					this.isActiveClass =true;
					this.isNoActive=false;
					this.ShowtopBtn=true;
				}else{
					this.ShowtopBtn=true;
					this.isActiveClass =false;
					this.isNoActive=true;
					setTimeout(()=>{
						this.ShowtopBtn=false;
					},500)
				}
			}
		},
		methods:{
			menu(){
				this.isMenu = true;
			},
			clearMenu(){
				this.isMenu = false;
			},
            go(url){
				this.clearMenu();
				if(url=='/pages/shop/shopping'){
					if(!this.$Auth.username||this.$Auth.username==''){
						uni.redirectTo({
						    url:'/pages/shop/shoppingAuth'
						})
					}else{
						uni.redirectTo({
						    url
						})
					}
				}
                uni.redirectTo({
                    url
                })
            },
			scrollTop(){
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 300
				});
			},
            navigateCart(){
                this.clearMenu();
            	this.$Shop.navigateCart();
            },
			switchTab(url){
				uni.switchTab({
				    url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fab-menus-item{
		color:#fff;
		font-size:28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom:20rpx;
		div{
			width:80rpx;
			height:80rpx;
			border-radius:50%;
			line-height: 80rpx;
			text-align: center;
			font-size:30rpx;
			background: #fff;
			color:#838383;
			margin-left:30rpx;
			margin-right:10rpx;
		}
	}
	.menu-contianer{
		position: fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index:1000;
		background: rgba(0, 0, 0, 0.7);
	}
	.fab-btns{
		position: fixed;
		bottom:120rpx;
		right:20rpx;
		z-index: 1000;
		.fab-btns-item{
			display: block;
			clear: both;
			width:90rpx;
			padding:22rpx 8rpx;
			background:#000;
			color:#fff;
			font-size:24rpx;
			border-radius: 50%;
			text-align: center;
			margin-bottom:20rpx;
			float: right;
		}
		.fab-btns-item-clear{
			display: block;
			clear: both;
			width:100rpx;
			height: 100rpx;
			background:#ff5577;
			color:#fff;
			text-align: center;
			font-size:32rpx;
			border-radius: 50%;
			text-align: center;
			margin-bottom:20rpx;
			float: right;
			line-height:100rpx;
		}
	}
</style>
